<template>
    <div class="login-register-box">
        <div class="login-box">
            <div class="login-tit">
                <h6 class="tw-mb-[15px]">欢迎登录</h6>
                <h3 class="tw-mb-[30px]">格力云售后服务平台</h3>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="账户登录" name="loginAccount">
                    <LoginForm ref="loginFormRef" @login="toLogin"></LoginForm>
                </el-tab-pane>
                <el-tab-pane label="手机号登录" name="loginPhone">
                    <LoginForPhone ref="loginForPhoneRef" @login="toLogin"></LoginForPhone>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import LoginForm from './LoginForm/LoginForm.vue'
import LoginForPhone from './LoginForm/LoginForPhone.vue'
import { loginUrl } from '@/api/reqUrl'

import { setToken } from '@/vueLsp/token.js'
import { setUser } from '@/vueLsp/user.js'
import { setLoginName, removeLoginName } from '@/vueLsp/loginInfo.js'

import { userStore } from '@/store/index'

const userState = userStore()
const routesMeta = {
    title: '登录注册',
    keepAlive: true
}

const { proxy } = getCurrentInstance()

const serviceReq = proxy.$serviceReq

const loginFormRef = ref(null)
const router = useRouter()

const activeName = ref('loginAccount')

const toLogin = (values) => {
    // console.log('===values', values)
    const params = {
        ...values
    }
    if (values.remember) {
        setLoginName(values.userName)
    } else {
        removeLoginName()
    }
    serviceReq
        .post(loginUrl, params)
        .then((res) => {
            // console.log('res===', res)
            const resData = res.data || {}
            setToken(resData.token)
            setUser(resData)
            const { fullName, phone, userName, token, refreshToken } = resData
            userState.saveUserInfo({ fullName, phone, userName, ...resData })
            userState.saveToken({ token, refreshToken })
            router.push({
                name: 'layout'
            })
        })
        .catch((err) => {
            loginFormRef.value.cancelBtnLoading()
            console.log(err)
        })
}
</script>
<style lang="scss" scoped>
.login-register-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    background-image: url('../../img/login/new-login-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-right: 60px;
    box-sizing: border-box;
    .login-box {
        width: 420px;
        height: auto;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 30px;
        border-radius: 3px;
        overflow: hidden;
        padding: 30px;
        box-sizing: border-box;
        .login-tit {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    }
}
</style>
